<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .container1 {
            width: 24%;
            height: 100%;
            margin-top: 10%;
            margin-left: 10%;
        }

        .font {
            font-size: 24px;
            color: #0b4d93;
            font-weight: 500;
            /* 注意：原代码写的500px，这里修正为500（权重无单位） */
        }
    </style>
</head>

<body>
    <div class="container1">
        <nav aria-label="Page navigation">
            <ul class="list-group" id="menuList">
                <!-- 这里的内容将通过 jQuery 动态生成 -->
            </ul>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>

    <script>
        // 1. 定义所有菜单项的数据（文本 + 跳转链接）
        const menuItems = [
            { text: '日历', url: './Src/HTML/excess.html' },
            { text: '计算器', url: './Src/HTML/calculator.html' },
            { text: '(BMI)计算器', url: './Src/HTML/BMICalculator.html' },
            { text: '倒计时组件', url: './Src/HTML/countdown.html' },
   
        ];

        // 2. 获取列表容器
        const $menuList = $('#menuList');

        // 3. 循环遍历数据，动态生成列表项
        menuItems.forEach(item => {
            // 创建 li 元素（包含 a 和 div）
            const $li = $(`
                <li>
                    <a class="list-group-item" href="${item.url}">
                        <div class="font">${item.text}</div>
                    </a>
                </li>
            `);
            // 添加到列表容器
            $menuList.append($li);
        });
    </script>
</body>

</html>